<template>
  <el-container class="app-container" direction="vertical">
    <el-container class="header-container" direction="vertical">
      <i class="el-icon-collection-tag">活动详情</i>
      <el-container direction="horizontal" style="margin-left: 140px;margin-top: 80px;margin-bottom: 50px">
        <img :src="item.url" width="480px" height="270px" alt="图片无法加载" style="margin: 20px 20px 20px 40px;">
        <el-container style="margin-left: 30px" height="270px" direction="vertical">
          <h1 style="color: white;letter-spacing: 7px;">通用活动模板</h1>
          <el-container direction="horizontal">
            <el-tag size="medium">活动类型</el-tag>
          </el-container>
          <el-container direction="horizontal" style="color: white">
            <i class="el-icon-time" />
            <span style="margin-left: 5px">2022年7月1日 14:50~8月6日 00:00</span>
          </el-container>
          <el-container direction="horizontal" style="color: white">
            <i class="el-icon-location-outline" />
            <span style="margin-left: 5px">北京市西城区花枝胡同14号1212</span>
          </el-container>
          <el-container direction="horizontal" style="color: white">
            <i class="el-icon-user" />
            <span style="margin-left: 5px">已报名 0</span>
          </el-container>
          <el-container direction="horizontal">
            <el-button type="primary" size="medium" style="width: 240px;height: 65px;font-size: 20px">立即报名</el-button>
            <el-button size="medium" style="width: 120px;height: 65px;font-size: 20px;margin-left: 20px">反馈</el-button>
          </el-container>
        </el-container>
      </el-container>
    </el-container>
    <el-container class="medium-container" direction="vertical">
      <el-row :xs="8" :sm="6" :md="4" :lg="3">主办方: 图书馆单位</el-row>
      <el-row :xs="8" :sm="6" :md="8" :lg="9" :xl="11">报名时间:2022年6月26日 19:43~6月27日 19:43</el-row>
    </el-container>
    <h1 style="margin-left: 30px;margin-top: 20px;letter-spacing: 2px;">活动介绍</h1>
    <el-container class="footer-container" direction="vertical">
      <el-row style="margin: 30px 30px 10px;">法学院将于7月1日19点,开展考研指导系列活动第三期研究生招生政策宣传讲座，特邀政法大学法学院院长助理、研究生工作办公室主任副教授带来题为“法科生考研选择与准备--政法大学研究生招生宣讲”的讲座，主要涉及政法大学的学校简介、教育概况、研究生招生政策以及法科生的考研与求职等四部分内容，其中，政法大学研究生招生政策将围绕夏令营、推免、全国统考展开。</el-row>
      <el-row style="margin: 0 30px 30px;">关于法科生的考研与求职内容，将主要分析学业与职业生涯的选择与规划。现征集观众100人，报名且按时签到、全程参与的同学可获得活动卡1张，21级同学可记录第二课堂成绩。</el-row>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      item: {
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.app-container{
  //margin: 30px;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

  .header-container{
    // border-radius: 15px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    background: #373f61;
  }

  .el-icon-collection-tag {
    font-size: 1.2rem;
    line-height: 1.7;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    margin-top: 10px;
    margin-left: 27px;
    color: white;
  }

  .medium-container {
    margin: 40px 2rem;
    font-size: 18px;
    font-family: "微软雅黑 Light",serif;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  }

  .footer-container {
    font-size: 23px;
    font-family: 楷体,serif;
    margin: 20px 2rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  }
}
</style>
